<template>
    <div class="mBg result py-[20px] px-[12px]">
        <div class="result-content py-[15px] px-[10px] overflow-auto">
            <div class="redTitle resulttitle">
                测评结果
            </div>

            <div class="namebox py-[5px] px-[5px] mt-[10px]  ">

                <van-row>
                    <van-col span="9">
                        <div class="flex items-center truncate">
                            <span>姓名 : </span>
                            <p> {{ ruleFrom.name }}</p>
                        </div>
                    </van-col>
                    <van-col span="5">
                        <div class="flex items-center truncate">
                            <span>性别 : </span>
                            <p> {{ ruleFrom.sex }}</p>
                        </div>
                    </van-col>
                    <van-col span="10">
                        <div class="flex items-center truncate">
                            <span>年龄 : </span>
                            <p>{{ ruleFrom.age }}</p>
                        </div>
                    </van-col>
                </van-row>
            </div>

            <div ref="el" class="pie-doughnut h-[250px] w-full mt-[10px]">
                <div id="pieDoughnut" :style="{ width: '100%', height: '100%' }"></div>
            </div>
            <div class="mt-[15px]" v-for="item in mapObj">
                <div class="blueTitle resulttitle ">
                    {{ item.title }}: {{ item.content }}
                </div>
                <p class="mt-[7px] ml-[10px]">
                    {{ item.result }}
                </p>
            </div>

            <!-- <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    品行问题:正常
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你在品行方面表现正常。
                </p>
            </div>
            <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    多动注意缺陷:正常
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你的行为表现和注意力表现正常。
                </p>
            </div>
            <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    同伴交往问题:边缘水平
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你在同伴交往方面没有表现出明显的问题，继续保持关注即可。
                </p>
            </div>
            <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    亲社会行为:正常
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你经常表现出亲社会行为，包括分享、理解、乐于助人等等，继续保持将有利于你的身心健康。
                </p>
            </div>
            <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    困难总分:正常
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你在情绪症状、品行问题、多动注意不集中、同伴交往等方面总体而言暂时不存在明显问题，继续保持即可。
                </p>
            </div>
            <div class="mt-[15px]">
                <div class="blueTitle resulttitle ">
                    影响因子:正常
                </div>
                <p class="mt-[7px] ml-[10px]">
                    你在情绪方面、注意力方面、行为方面以及与别人相处方面暂时不存在困难或存在的困难不足以引起困扰。
                </p>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import api from "@/api/api"
const el = ref(null)
const echart = echarts;
const route = useRoute()
let chartDom: HTMLElement | null = null
let myChart: any = null;
let option: any = {};
const fanxiangjifenList = [7, 11, 14, 21, 25] //其中第7、11、14、21和25这五个条目为反向计分
const qingxu = [3, 8, 13, 16, 24]
const pinxing = [5, 7, 12, 18, 22]
const duodong = [2, 10, 15, 21, 25]
const frindList = [6, 11, 14, 19, 23]
const shehui = [1, 4, 9, 17, 20]
const yxList = [27, 28, 29, 30, 31]
function generateArray(start, end): number[] {
    let arr = [];
    for (var i = start; i <= end; i++) {
        arr.push(i);
    }
    return arr;
}
const mapObj = ref<any[]>([])
const textObj = {
    '情绪症状': {
        '正常': {
            points: generateArray(-10, 3),
            title: '孩子的情绪正常。',
        },
        '边缘水平': {
            points: [4],
            title: '保持观察，明晰产生不良情绪的原因。'
        },
        '异常': {
            points: generateArray(5, 10),
            title: '需要重视孩子的情绪症状，必要时可求助专业帮助。'
        },
    },
    '品行因子': {
        '正常': {
            points: generateArray(-10, 2),
            title: '孩子在品行方面表现正常。'
        },
        '边缘水平': {
            points: [3],
            title: '保持关注。'
        },
        '异常': {
            points: generateArray(4, 10),
            title: '建议对孩子情绪管理、遵守规则等方面进行观察并给予正确引导。'
        },
    },
    '多动注意缺陷': {
        '正常': {
            points: generateArray(-10, 5),
            title: '孩子的行为表现和注意力表现正常。'
        },
        '边缘水平': {
            points: [6],
            title: '孩子多动和注意力不集中处于边缘水平，要保持关注并正确引导。'
        },
        '异常': {
            points: generateArray(7, 10),
            title: '孩子存在多动和注意力不集中的情况，建议到专业医院或机构进一步测试。'
        },
    },
    '同伴交往问题': {
        '正常': {
            points: generateArray(-10, 2),
            title: '孩子在同伴交往方面正常。'
        },
        '边缘水平': {
            points: [3],
            title: '孩子在同伴交往方面没有表现出明显的问题，继续保持关注即可。'
        },
        '异常': {
            points: generateArray(4, 10),
            title: '孩子在同伴交往方面存在一定的问题，需要密切关注，了解问题的原因，帮助孩子建立良好的同伴关系。'
        },
    },
    '亲社会行为': {
        '正常': {
            points: generateArray(6, 10),
            title: '孩子经常表现出亲社会行为，包括分享、理解、乐于助人等等，继续保持将有利于孩子的身心健康。'

        },
        '边缘水平': {
            points: [5],
            title: '孩子的亲社会行为表现程度中等，可以通过教育或以身作则的方式帮助孩子体会到帮助他人的乐趣。'
        },
        '异常': {
            points: generateArray(-10, 4),
            title: '需要对孩子进行教育并且以身作则，帮助孩子学会帮助他人，理解他人。'

        },
    },
    '困难总分': {
        '正常': {
            points: generateArray(-10, 13),
            title: '孩子在情绪症状、品行问题、多动注意不集中、同伴交往等方面总体而言暂时不存在明显问题，继续保持即可。'
        },
        '边缘水平': {
            points: generateArray(14, 16),
            title: '孩子在在某一个或某几个方面存在一定困难，需要注意对孩子的引导。'

        },
        '异常': {
            points: generateArray(17, 40),
            title: '孩子在情绪、多动注意不足、同伴交往等方面存在不同程度的困难。需要重视，并对相应问题进行干预和引导。'

        },
    },
    '影响因子': {
        '正常': {
            points: [0],
            title: '孩子在情绪方面、注意力方面、行为方面以及与别人相处方面暂时不存在困难或存在的困难不足以引起困扰。'
        },
        '边缘水平': {
            points: [1],
            title: '孩子在情绪方面、注意力方面、行为方面以及和别人相处方面目前虽然没有明显的困扰，但是需要保持观察。'
        },
        '异常': {
            points: generateArray(2, 10),
            title: '孩子在情绪方面、注意力方面、行为方面以及和别人相处方面暴露出一定程度的问题，需要持续观察并针对具体问题为孩子提供帮助。'
        },
    },
}







const initChart = async (list) => {
    await nextTick()
    chartDom = document.getElementById('pieDoughnut') as HTMLElement
    myChart = echart.init(chartDom);
    setOption(list);
}
const setOption = (list) => {
    const newList = list.map(res => {
        let newRes = res
        if (res < 0) {
            newRes = 0
        }
        return newRes
    })
    const nameList = [
        { name: '品行因子', max: 10 },
        { name: '同伴交往因子', max: 10 },
        { name: '影响因子', max: 10 },
        { name: '情绪症状因子', max: 10 },
        { name: '亲社会行为因子', max: 10 },
        { name: '多动因子', max: 10 },
        { name: '困难因子', max: 40 },

    ]
    option = {
        radar: {
            shape: 'polygon',
            center: ['50%', '55%'],
            radius: '70%',
            // shape: 'circle',
            indicator: nameList,
            name: {
                rich: {
                    a: {
                        color: '#666666',
                        fontSize: 14,
                        fontWeight: 500
                    },
                    b: {
                        color: '#4C7BE4',
                        align: 'center',
                        fontSize: 14,
                        fontWeight: 600,
                        padding: 2,
                        // borderRadius: 4
                    }
                },
                formatter: (a, b) => {
                    let point = 0
                    nameList.forEach((res, index) => {
                        if (res.name === a) {
                            point = newList[index]
                        }
                    })
                    return `{a|${a}}\n{b|${point}分}`
                }
            },
            splitArea: {
                show: false,
                areaStyle: {
                    color: 'rgba(255,0,0,0)', // 图表背景的颜色
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#C5C5C5', // 设置网格的颜色
                },
            },
        },

        series: [
            {
                type: 'radar',
                data: [
                    {
                        // value: [5, 1, 3, 4, 7, 10, 5, 3],
                        value: newList,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: '#4C7BE4',

                            },
                        }
                    },
                ],
                symbolSize: 0, // 拐点的大小
                areaStyle: {
                    normal: {
                        width: 1,
                        opacity: 0.1,
                    },
                },
            }
        ]
    };
    option && myChart.setOption(option);
}
//0 分：不符合；1 分：有点符合；2 分：完全符合
import { useUserStore } from "@/store/user";
const user = useUserStore()
onMounted(() => {
    const choseList: string[] = JSON.parse(route.query.choseList as string)
    // const choseList: string[] = route.query.choseList
    console.log(choseList);
    
    ruleFrom.value = {
        ...route.query
    }
    const objPoint = {
        '不符合': 0,
        '符合': 1,
        '完全符合': 2,
        '没有': 0,
        '轻微或较为': 1,
        '非常': 2,
    }
    let yx = 0 //根据量表的附加问题，评估相应的影响程度

    let qx = 0,
        px = 0,
        dd = 0,
        fd = 0,
        sh = 0
    choseList.forEach((re, index) => {
        const pageIndexx = index + 1

        let point = objPoint[re] || 0

        if (fanxiangjifenList.includes(pageIndexx)) {
            // 反向扣分
            const objPointFan = {
                '不符合': 2,
                '符合': 1,
                '完全符合': 0,
            }
            point =  objPointFan[re] || 0
        }

        if (qingxu.includes(pageIndexx)) {
            qx += point
        }
        if (pinxing.includes(pageIndexx)) {
            px += point
        }
        if (duodong.includes(pageIndexx)) {
            dd += point
        }
        if (frindList.includes(pageIndexx)) {
            fd += point
        }
        if (shehui.includes(pageIndexx)) {
            sh += point
        }
        if (yxList.includes(pageIndexx)) {
            yx += point
        }
    });
    const kunnanTotal = qx + px + dd + fd
    //困难总分是由情绪症状、品行问题、多动、同伴交往问题四个部分总分构成
    const indicator = [px, fd, yx, qx, sh, dd, kunnanTotal]
    mapObj.value = []
    const fenObj = {
        '情绪症状': qx,
        '品行因子': px,
        '多动注意缺陷': dd,
        '同伴交往问题': fd,
        '亲社会行为': sh,
        '困难总分': kunnanTotal,
        '影响因子': yx,
    }
    console.log(route.query);

    for (let i in textObj) {
        const fen = fenObj[i]
        let content = ''
        let title = ''
        for (let j in textObj[i]) {
            if (textObj[i][j]['points'].includes(fen)) {
                content = j
                title = textObj[i][j]['title']
                continue
            }
        }

        let obj = {
            title: i,
            content,
            result: title,
        }
        mapObj.value.push(obj)
    }
    console.log(mapObj.value);
    initChart(indicator)
    if (!route.query.id) {
        saveData(JSON.stringify(mapObj.value),JSON.stringify(choseList) )
    }
})
const ruleFrom = ref({
    // ...route.query
})
const saveData= async(result,answer_record)=> {
    await api.BasicAssessmentADD({
        name: route.query.name,
        id_card: route.query.id_card,
        other_info: JSON.stringify(route.query || {}),
        answer_record,
        result
    })
}

</script>

<style scoped lang="scss">
.result {
    .result-content {
        background: #FFFFFF;
        height: 100%;
        border-radius: 14px 14px 14px 14px;
    }

    .redTitle {}

    .berforTitle {
        content: '';
        width: 4px;
        position: absolute;
        left: 0;
        background: #F04928;
        border-radius: 2px 2px 2px 2px;
        height: 60%;
        bottom: 18%;
    }

    .blueTitle::before {
        background: #4C7BE4;
        @extend .berforTitle;
    }

    .redTitle::before {
        background: #F04928;
        @extend .berforTitle;
    }

    .resulttitle {
        color: #000;
        font-size: 18px;
        font-weight: 600;
        padding-left: 10px;
        position: relative;
    }

    .namebox {
        background: #F8F9FD;
        border-radius: 5px 5px 5px 5px;
        font-size: 15px;
        font-weight: 500;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        overflow: hidden;

        span: {
            color: #6B6B6B;
        }

        p {
            margin-left: 5px;
            color: $primary;
        }
    }
}
</style>